<template>
  <div class="restaurant-detail" v-loading="loading">
    <!-- 返回按钮 -->
    <div class="back-btn">
      <el-button
        type="primary"
        plain
        @click="handleBack"
      >
        <el-icon><ArrowLeft /></el-icon>
        返回列表
      </el-button>
    </div>

    <template v-if="restaurant">
      <!-- 餐厅基本信息 -->
      <div class="restaurant-info">
        <el-image :src="restaurant.image" fit="cover" class="restaurant-img" />
        <div class="info-content">
          <h1>{{ restaurant.name }}</h1>
          <div class="meta">
            <p><i class="el-icon-location"></i> {{ restaurant.address }}</p>
            <p><i class="el-icon-phone"></i> {{ restaurant.phone }}</p>
            <p><i class="el-icon-time"></i> {{ restaurant.businessHours }}</p>
          </div>
          <p class="desc">{{ restaurant.description }}</p>
          <div class="action-area">
            <el-tag :type="restaurant.status === 1 ? 'success' : 'danger'">
              {{ restaurant.status === 1 ? '营业中' : '休息中' }}
            </el-tag>
            <el-button
              type="primary"
              size="large"
              :disabled="restaurant.status !== 1"
              @click="handleOrder"
            >
              立即预订
            </el-button>
          </div>
        </div>
      </div>

      <!-- 菜品列表 -->
      <div class="section">
        <h2>菜品列表</h2>
        <div class="dish-list">
          <el-card
            v-for="dish in restaurant.dishes"
            :key="dish.id"
            class="dish-item"
            :body-style="{ padding: '0px' }"
          >
            <el-image :src="dish.image" fit="cover" class="dish-img" />
            <div class="dish-info">
              <h3>{{ dish.name }}</h3>
              <p class="category">{{ dish.categoryName }}</p>
              <p class="desc">{{ dish.description }}</p>
              <div class="price-info">
                <span class="price">¥{{ dish.price }}</span>
                <span class="sales">月售 {{ dish.sales }}</span>
              </div>
            </div>
          </el-card>
        </div>
      </div>

      <!-- 餐桌列表 -->
      <div class="section">
        <h2>餐桌信息</h2>
        <div class="table-list">
          <el-card
            v-for="table in restaurant.tables"
            :key="table.id"
            class="table-item"
            :class="{ 'table-occupied': !table.available }"
          >
            <h3>{{ table.tableNumber }}</h3>
            <p>可容纳: {{ table.capacity }}人</p>
            <p class="status">状态: {{ table.status === 0 ? '空闲' : '占用中' }}</p>
            <el-tag :type="table.available ? 'success' : 'danger'">
              {{ table.available ? '可预订' : '不可预订' }}
            </el-tag>
          </el-card>
        </div>
      </div>

      <!-- 预订表单 -->
      <order-form
        ref="orderFormRef"
        :restaurant-id="restaurant.id"
        :tables="restaurant.tables"
        :dishes="restaurant.dishes"
        @success="handleOrderSuccess"
      />
    </template>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ArrowLeft } from '@element-plus/icons-vue'
import { getRestaurantDetail } from '@/api/restaurant'
import { ElMessage } from 'element-plus'
import OrderForm from '@/components/OrderForm.vue'

const route = useRoute()
const router = useRouter()
const loading = ref(false)
const restaurant = ref(null)
const orderFormRef = ref(null)

// 获取餐厅详情
const fetchDetail = async () => {
  try {
    loading.value = true
    const res = await getRestaurantDetail(route.params.id)
    restaurant.value = res.data
  } catch (error) {
    console.error('获取餐厅详情失败:', error)
    ElMessage.error('获取餐厅详情失败')
  } finally {
    loading.value = false
  }
}

// 处理预订
const handleOrder = () => {
  orderFormRef.value?.open()
}

// 处理预订成功
const handleOrderSuccess = () => {
  // 刷新餐厅详情
  fetchDetail()
}

// 返回上一页
const handleBack = () => {
  router.back()
}

onMounted(() => {
  fetchDetail()
})
</script>

<style scoped lang="scss">
.back-btn {
  margin-bottom: 20px;
}

.restaurant-detail {
  padding: 20px;
}

.restaurant-info {
  display: flex;
  gap: 30px;
  margin-bottom: 40px;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);

  .restaurant-img {
    width: 300px;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
  }

  .info-content {
    flex: 1;

    h1 {
      margin: 0 0 20px;
      font-size: 28px;
    }

    .meta {
      margin-bottom: 15px;

      p {
        margin: 8px 0;
        color: #666;

        i {
          margin-right: 8px;
        }
      }
    }

    .desc {
      margin-bottom: 20px;
      color: #666;
      line-height: 1.6;
    }

    .action-area {
      display: flex;
      align-items: center;
      gap: 20px;
    }
  }
}

.section {
  margin-bottom: 40px;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);

  h2 {
    margin: 0 0 20px;
    font-size: 24px;
    font-weight: bold;
  }
}

.dish-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

.dish-item {
  cursor: pointer;
  transition: all 0.3s;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  }

  .dish-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }

  .dish-info {
    padding: 15px;

    h3 {
      margin: 0 0 8px;
      font-size: 18px;
      font-weight: bold;
    }

    .category {
      color: #666;
      margin-bottom: 12px;
    }

    .desc {
      color: #666;
      margin-bottom: 12px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .price-info {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .price {
        color: #f56c6c;
        font-size: 20px;
        font-weight: bold;
      }

      .sales {
        color: #666;
        font-size: 14px;
      }
    }
  }
}

.table-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.table-item {
  text-align: center;
  padding: 20px;

  h3 {
    margin: 0 0 10px;
    font-size: 18px;
  }

  p {
    margin: 0 0 10px;
    color: #666;
  }

  &.table-occupied {
    opacity: 0.6;
  }
}
</style>
